<template>
  <!-- 重大操作确认弹窗 -->
  <c-modal
    v-model="visible"
    title="重大操作确认"
    :closeable="false"
    width="300px"
    @ok="submit"
    :okLoading="loading"
    @cancel="passWord = undefined"
  >
    <p>是否确认进行当前操作，若确认，请输入本账号密码，提交成功即生效</p>
    <a-form>
      <a-form-item style="height:1px;margin:0;overflow:hidden;">
        <a-input></a-input>
      </a-form-item>
      <a-form-item style="height:1px;margin:0;overflow:hidden;">
        <a-input-password></a-input-password>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model="passWord"
          placeholder="请输入登录密码"
          type="password"
        ></a-input>
      </a-form-item>
    </a-form>
  </c-modal>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      passWord: undefined
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  },
  methods: {
    submit() {
      if (this.passWord) {
        this.$emit("submit", { password: this.passWord });
      } else {
        this.$message.warning("请输入登录密码");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ant-form {
  .ant-form-item:nth-child(1),
  .ant-form-item:nth-child(2) {
    margin: 0;
    height: 1px;
    overflow: hidden;
  }
}
</style>
